<template>
  <el-container v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)" class="productContainer">
    <el-header height="81px">
      <div class="flex ydsl-top">
        <img src="../../static/images/logo.png" alt="">
        <div class="everyOtherOine"></div>
        <div class="ydslTitle">制品看板</div>
      </div>
    </el-header>
    <el-main class="elMain">
      <div style="height:760px;" class="">
        <el-carousel trigger="click" :autoplay="autoplay" @change="carouselChange">
          <el-carousel-item v-for="(item,pIndex) in productData" :key="pIndex">
            <div class="productQuery clear">
              <div class="productQueryLabel fl">日期：</div>
              <el-date-picker v-model="beginDate" type="date" placeholder="请选择开始日期" class="product-date-picker fl"
                @change="beginDateChange"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"></el-date-picker>
              <div class="productQueryLabel fl">至</div>
              <el-date-picker v-model="endDate" type="date" placeholder="请选择结束日期" class="product-date-picker fl"
                @change="endDateChange"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"></el-date-picker>
            </div>
            <div class="clear">
              <div class="productTableBox flex fl">
                <el-table :data="tableData[0]" stripe class="productTable flex1" center>
                  <el-table-column prop="number" label="序号" align="center" min-width="60px"></el-table-column>
                  <el-table-column prop="create_date" label="日期" width="160px" align="center"></el-table-column>
                  <el-table-column prop="outer_length" label="卷长（m）" align="center" min-width="100px"></el-table-column>
                  <el-table-column prop="act_thickness" label="宽度（um）" align="center" min-width="100px"></el-table-column>
                </el-table>
                <el-table :data="tableData[1]" stripe class="productTable flex1">
                  <el-table-column prop="number" label="序号" align="center" min-width="60px"></el-table-column>
                  <el-table-column prop="create_date" label="日期" width="160px" align="center"></el-table-column>
                  <el-table-column prop="outer_length" label="卷长（m）" align="center" min-width="100px"></el-table-column>
                  <el-table-column prop="act_thickness" label="宽度（um）" align="center" min-width="100px"></el-table-column>
                </el-table>
              </div>
              <mybar :chartData="chartData" v-if="chartData.length>0"></mybar>
            </div>
            <el-button-group class="pageBox">
              <el-button icon="el-icon-arrow-left" disabled v-if="currentPage==1">上一页</el-button>
              <el-button icon="el-icon-arrow-left" v-else @click="prevPage">上一页</el-button>
              <el-button disabled v-if="currentPage>=totalPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
              <el-button v-else @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-button-group>
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-main>
  </el-container>
</template>

<script>
  import Group from './BoardGroup.vue'
  import mybar from './myBarChart.vue'
  import axios from 'axios'
  import qs from 'qs'
  import { getCookie, delCookie } from '../cookieUtil/cookieUtil';
let echarts = require('echarts/lib/echarts');
  export default {
    name: 'Index',
    components: {
      'mybar': mybar,
      //'v-Group': Group
    },

    data () {
      
      var a={
        number: '1',
        create_date: '2016-05-02',
        outer_length: '20',
        act_thickness: '20',
      };
      var b=[];
      var c=[];
      for (let index = 0; index < 20; index++) {
        b.push(a);
      };
      c[0]=b;
      c[1]=b;
      c[2]=b;
      console.log(c);
      return {
        autoplay:false,
        device: 1,
        loading: false,
        beginDate: '',
        endDate: '',
        tableData: [],
        fRowBegin: 0,
        fRowEnd: 32,
        total: 100,
        pageSize: 32,
        currentPage:1,
        totalPage:10,
        productData:'',
        chartData:[],
        autoplay:false,
      }
    },

    created(){
      this.getProductsData();
    },
    mounted(){
    },
    methods: {
      //退出
      exit (){
        delCookie('userId')
        this.$router.push({
          path: "/",
        });
      },
      beginDateChange(val){
        console.log('开始日期',val);
        this.currentPage=1;
        this.fRowBegin = 0;
        this.getProducts();
      },
      endDateChange(val){
        console.log('结束日期',val);
        this.currentPage=1;
        this.fRowBegin = 0;
        this.getProducts();
      },
      getProductsData(){
        this.loading=true;
        this.$ajax.post(this.webUrl+'/Default/productsKanban',{}).then(res => {
          console.log('status',res.status);
          if(res.status == 200){
            this.loading=false;
            console.log(res.data);
            this.productData=res.data;
            this.device = res.data[0].id;
            //this.getProducts();
            //this.getChartData();
            //this.beginDate = res.data[0].data[0].create_date;
          }
        }).catch(error => {
          console.log(error);
        })
      },
      getProducts(){
        this.loading=true;
        console.log('fRowBegin',this.fRowBegin);
        this.$ajax.post(this.webUrl+'/Default/productsMoreKanban',
        {
          device: this.device,
          fBeginTime: this.beginDate,
          fEndTime: this.endDate,
          fRowBegin: this.fRowBegin,
          fRowEnd: this.fRowEnd,
        }).then(res => {
          console.log('status',res.status);
          if(res.status == 200){
            this.loading=false;
            console.log(res.data);
            this.total = parseInt(res.data.total);
            if(res.data.total%this.pageSize==0){
              this.totalPage = parseInt(res.data.total/this.pageSize);
            }else{
              this.totalPage = parseInt(res.data.total/this.pageSize)+1;
            }
            console.log('totalPage',this.totalPage);
            console.log('currentPage',this.currentPage);
            var b=[];
            var b1=[];
            var b2=[];
            var c=[];
            res.data.data.forEach(function(i,index){
              i.number=index+1;
              //console.log(i);
              if(index<16){
                b.push(i);
              }else{
                b1.push(i);
              }
              // else if(index>15&index<32){
              //   b1.push(i);
              // }
            });
            c[0]=b;
            c[1]=b1;
            //c[2]=b2;
            console.log(c);
            this.tableData = c;
          }
        }).catch(error => {
          console.log(error);
        });
      },
      getChartData(){
        this.$ajax.post(this.webUrl+'/Default/productsKanban2',{
          device: this.device,
        }).then(res => {
          console.log('status',res.status);
          if(res.status == 200){
            console.log(res.data);
            this.chartData=res.data.data;
          }
        }).catch(error => {
          console.log(error);
        })
      },
      pageChange(e){
        console.log('currentPage',e);
        this.fRowBegin = (e-1)*this.pageSize;
        this.getProducts();
      },
      prevPage(){
        this.currentPage--;
        this.fRowBegin = (this.currentPage-1)*this.pageSize;
        console.log('currentPage',this.currentPage);
        this.getProducts();
      },
      nextPage(){
        this.currentPage++;
        this.fRowBegin = (this.currentPage-1)*this.pageSize;
        console.log('currentPage',this.currentPage);
        this.getProducts();
      },
      goBack(){
        this.$router.go(-1)
      },
      carouselChange(val){
        console.log('carouselChange',val);
        //this.current = val;
        this.device = this.productData[val].id;
        this.fRowBegin = 0;
        this.currentPage=1;
        this.chartData=[];
        this.tableData =[];
        this.getProducts();
        this.getChartData();
      },
    }
  }
</script>

<style scoped>

</style>
